$spin-prefix-cls: "#{$css-prefix}spin";


.#{$spin-prefix-cls} {
  color: $spin-color;
  vertical-align: middle;
  text-align: center;
  font-size:$spin-font-size;

  &-dot {
      position: relative;
      display: block;
      border-radius:$spin-dot-border-radius;
      background-color: $primary-color;
      @include square($spin-dot-size);
      animation: ani-spin-bounce 1s 0s ease-in-out infinite;
  }

  &-large &-dot {
    @include square($spin-dot-size-large);
  }

  &-small &-dot {
    @include square($spin-dot-size-small);
  }

  &-fix {
    position: absolute;
    top: $spin-fix-top;
    // bottom: 0;
    left:$spin-fix-left;
    // right: 0;
    z-index: $zindex-spin;
    // display: table;
    @include square(100%);
    background-color: $spin-fix-background-color;
  }
  &-fullscreen{
      z-index: $zindex-spin-fullscreen;
      &-wrapper{
          position: fixed;
          top: $spin-fullscreen-wrapper-top;
          right: $spin-fullscreen-wrapper-right;
          bottom: $spin-fullscreen-wrapper-bottom;
          left: $spin-fullscreen-wrapper-left;
      }
  }

  &-fix &-main {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    // display: table-cell;
    // vertical-align: middle;
    // @include square(inherit);
  }

  &-fix &-dot {
    display: inline-block;
  }

  &-text,
  &-show-text &-dot {
    display: none;
  }

  &-show-text &-text {
      display: block;
  }
}
// use in Table loading, Table right border is not included in .h-table-wrapper, so fix it
.#{$table-prefix-cls}-wrapper{
    > .#{$spin-prefix-cls}-fix{
        border: 1px solid $border-color-base;
        border-top:$spin-table-wrapper-fix-border-top;
        border-left: $spin-table-wrapper-fix-border-left;
    }
}
@keyframes ani-spin-bounce {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}
